<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>喜悦汇-抽奖</title>
		<link rel="stylesheet" type="text/css" href="/admins/vendors/bootstrap/dist/css/bootstrap.min.css"/>
		<link href="/wechatfront/css/draw.css" rel="stylesheet">
	</head>
	<body>
		<div class="container">
			<div class="top">
				<div class="logo">
					<a href="{{route('wechatfront.index',['id'=>$id])}}"><img src="/wechatfront/image/weixinqianglogo_white.png"/></a>
				</div>
				<div class="title">
					现场抽奖
				</div>
			</div>
			<div class="draw">
				<div class="draw_top">
					
				</div>
				<div class="draw_bottom">
					<div class="draw_head">
						<img id ="0" class="img-circle show" src="/wechatfront/image/head.jpg" alt="" />
						@foreach ($users as $user)
							<img id="{{$user->openid}}" class="img-circle" src="{{$user->headimgurl}}" alt="" data-name="{{$user->nickname}}"/>
						@endforeach
					</div>
					<div class="draw_btn">
						<button id="draw_btn" class="btn" data-status="stop" onclick="draw()">开始抽奖</button>
					</div>
					<div class="draw_no">
						个数：<input type="text" id="draw_no" value="1"/>
						<a onclick="clearSession()">清除所有(参与人数：<span id="totle">111</span>)</a>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		var randInterval,maxLength;
		var index = 0;
		$(function(){
			maxLength = $(".draw_bottom>.draw_head").children().length;
			$("#totle").html(maxLength-1);
		});
		function draw(){
			status = $( "#draw_btn" ).data("status");
			if(status == "stop"){
				start();
			}else{
				stop();
			}
		}
		function start(){
			if(sessionStorage.length == (maxLength-1)){
				alert('所有人均已经中奖');
			}else{
				$(".draw_top").html("");
				index = 0;
				$( "#draw_btn" ).data("status","start");
				randInterval = setInterval(rand_head_img,200);
				$( "#draw_btn" ).html("停止");
			}
		}
		
		function stop(){
			$( "#draw_btn" ).data("status","stop");
			clearInterval(randInterval);
			//随机获取头像
			draw_no = $("#draw_no").val();
			draw_no = draw_no>10?10:draw_no;
			get_rand_draw(draw_no);
			$( "#draw_btn" ).html("开始抽奖");
		}
		
		function rand_head_img(){
			//头像循环
			if(index == 0){
				index = parseInt(maxLength*Math.random());
				index == 0 ? 1:index;
			}else{
				index++;
				index = index>maxLength?1:index;
			}
			i = index-1;
			$(".draw_bottom>.draw_head>img").removeClass("show");
			$(".draw_bottom>.draw_head>img:eq("+i+")").addClass("show");
		}
		
		function get_rand_draw(no){
			last_rand_id = "";
			for(i=no;i>0;i--){
				//产生随机
				do{
					rand = parseInt((maxLength-1)*Math.random())+1;
					rand_id = $(".draw_bottom>.draw_head>img:eq("+rand+")").attr("id");
					if(sessionStorage.getItem(rand_id)==null){
						sessionStorage.setItem(rand_id, 1 );
						drawUser = $("#"+rand_id);
						sHtml = "<div class='draw_head'><img class='img-circle' src='"+drawUser.attr('src')+"' alt='' /><span>"+drawUser.data('name')+"</span></div>"
						$(".draw_top").append(sHtml);
						last_rand_id = rand_id;
						break;
					}
				}while(true);
				if(i == 1 || sessionStorage.length == (maxLength-1)){
					//获取最新用户的头像
					$(".draw_bottom>.draw_head>img").removeClass("show");
					$("#"+last_rand_id).addClass("show");
					break;
				}
			}
		}
		
		function clearSession(){
			sessionStorage.clear();
			$(".draw_top").html("");
			alert('清除成功');
		}
		
	</script>
</html>
